<template>
  <div class="app-container">
    <!-- 用户信用分展示 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="24">
        <el-alert
          :title="`您的信用分：${userScore} 分`"
          type="info"
          :closable="false"
          show-icon>
        </el-alert>
      </el-col>
    </el-row>

    <!-- 服务列表 -->
    <el-row :gutter="20">
      <el-col :span="6" :xs="12" v-for="service in serviceList" :key="service.configId">
        <el-card class="service-card" :class="{ 'eligible': service.remark === '1', 'not-eligible': service.remark === '0' }">
          <div class="service-header">
            <h3>{{ service.serviceName }}</h3>
            <el-tag :type="service.remark === '1' ? 'success' : 'warning'">
              {{ service.remark === '1' ? '可申请' : '不满足条件' }}
            </el-tag>
          </div>
          
          <div class="service-content">
            <p class="service-desc">{{ service.serviceDesc }}</p>
            <p class="required-score">
              <span>所需信用分：</span>
              <strong>{{ service.requiredScore }} 分</strong>
            </p>
          </div>

          <div class="service-actions">
            <el-button 
              type="primary" 
              size="small" 
              @click="viewDetail(service)"
              style="margin-right: 10px;">
              查看详情
            </el-button>
            <el-button 
              type="success" 
              size="small" 
              @click="applyService(service)"
              :disabled="service.remark !== '1'">
              {{ service.remark === '1' ? '立即申请' : '信用分不足' }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务详情对话框 -->
    <el-dialog title="服务详情" :visible.sync="detailDialogVisible" width="600px">
      <div v-if="selectedService">
        <h3>{{ selectedService.serviceName }}</h3>
        <p><strong>服务代码：</strong>{{ selectedService.serviceCode }}</p>
        <p><strong>所需信用分：</strong>{{ selectedService.requiredScore }} 分</p>
        <div>
          <strong>服务描述：</strong>
          <p>{{ selectedService.serviceDesc }}</p>
        </div>
        
        <div class="service-guide" v-if="selectedService.serviceCode">
          <h4>使用指南：</h4>
          <div v-if="selectedService.serviceCode === 'lendbook'">
            <p>1. 前往指定图书馆</p>
            <p>2. 出示身份证和信用分证明</p>
            <p>3. 享受免押金借阅服务</p>
            <p>4. 按时归还图书，维护个人信用</p>
          </div>
          <div v-else-if="selectedService.serviceCode === 'parking'">
            <p>1. 在支持信用付的停车场停车</p>
            <p>2. 使用手机扫码停车</p>
            <p>3. 离场时自动扣费，无需现场付款</p>
            <p>4. 保持良好停车习惯</p>
          </div>
          <div v-else-if="selectedService.serviceCode === 'hospital'">
            <p>1. 前往支持信用付的医院</p>
            <p>2. 出示身份证进行信用认证</p>
            <p>3. 享受"最多付一次"便民服务</p>
            <p>4. 就诊结束后统一结算</p>
          </div>
          <div v-else-if="selectedService.serviceCode === 'commute'">
            <p>1. 下载指定的公交地铁APP</p>
            <p>2. 完成信用认证绑定</p>
            <p>3. 扫码乘车，先乘后付</p>
            <p>4. 系统自动从绑定账户扣费</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
        <el-button 
          type="primary" 
          @click="applyService(selectedService)"
          :disabled="!selectedService || selectedService.remark !== '1'">
          立即申请
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getServiceList, applyService } from "@/api/credit/lifeService";

export default {
  name: "CreditLifeService",
  data() {
    return {
      serviceList: [],
      userScore: 0,
      detailDialogVisible: false,
      selectedService: null
    };
  },
  created() {
    this.getServiceList();
  },
  methods: {
    /** 获取服务列表 */
    getServiceList() {
      getServiceList().then(response => {
        this.serviceList = response.data.serviceList || [];
        this.userScore = response.data.userScore || 0;
      });
    },
    /** 查看服务详情 */
    viewDetail(service) {
      this.selectedService = service;
      this.detailDialogVisible = true;
    },
    /** 申请服务 */
    applyService(service) {
      if (service.remark !== '1') {
        this.$modal.msgError("您的信用分不足，无法申请此服务");
        return;
      }

      this.$confirm('确认申请"' + service.serviceName + '"服务？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        applyService(service.serviceCode).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.detailDialogVisible = false;
          // 可以在这里刷新页面数据或更新申请状态
        });
      });
    }
  }
};
</script>

<style scoped>
.service-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  min-height: 280px;
}

.service-card:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}

.service-card.eligible {
  border-left: 4px solid #67C23A;
}

.service-card.not-eligible {
  border-left: 4px solid #F56C6C;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.service-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.service-content {
  margin-bottom: 20px;
}

.service-desc {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.6;
}

.required-score {
  color: #909399;
  margin: 0;
}

.required-score strong {
  color: #409EFF;
}

.service-actions {
  text-align: center;
}

.service-guide {
  margin-top: 20px;
  padding: 15px;
  background-color: #F5F7FA;
  border-radius: 4px;
}

.service-guide h4 {
  margin-top: 0;
  color: #303133;
}

.service-guide p {
  margin: 8px 0;
  color: #606266;
}
</style> 